<template>
	<view>
		<view class="top-bg">
			<!-- <text>CONTRA</text> -->
		</view>
		<view class="info-con">
			<view class="info">
				<view class="title">
					<view class="user-name" @click="open" v-show="!userInfo.realname  && !userInfo.englishname">补全中英文名</view>
					<!-- <view class="user-name" @click="open">李银安/Kevin</view>	 -->
					<view class="user-name" @click="open" v-show="userInfo.realname && userInfo.englishname">{{ userInfo.realname }}/{{ userInfo.englishname }}</view>	
					<view class="user-state">
						<!-- <text class="iconfont iconshimingrenzheng"></text> -->
						<text v-if="userInfo.status === 2" style="padding: 0 0 3rpx 2px;letter-spacing: 1px;">已实名</text>
						<text style="letter-spacing: 1px;" v-if="userInfo.status !== 2" @click="realName">点击实名</text>
					</view>
					<view class="user-company">
						<!-- <text class="iconfont iconrenwuzhongxin-shimingrenzheng"></text> -->
						<text v-if="userInfo.company_name" style="padding: 0 0 2rpx 2rpx;">{{ userInfo.company_name }}</text>
						<text v-if="!userInfo.company_name" style="padding: 0 0 2rpx 2rpx;">请联系管理员绑定企业信息</text>
					</view>
				</view>
				<view class="name">
					<view style="text-align: center;font-size: 28rpx;color: #ccc;" v-if="contractList.length == 0">暂无签约</view>
					<view class="list" v-for="item in contractList" :key="item.id" @click="navTo(item.id)">
						<view class="left">
							<text>{{ item.class_name }}</text>
							<text :class="['status', {'red': item.status === 4}, {'yellow': item.status === 1}, {'green': item.status === 2}, {'gray': item.status === 0}, {'pay': item.status === 3}, {'invalid': item.status === 5}]">{{ item.status_test }}</text>
							<view class="iconfont icongengduo"></view>
						</view>
						<view class="right">
							<text>发起时间</text>
							<text>{{ item.create_time }}</text>
						</view>
					</view>
					
					<!-- <view class="list">
						<view class="left">
							<text>金宝贝96节课程包</text>
							<text class="status red">已完成</text>
							<view class="iconfont icongengduo"></view>
						</view>
						<view class="right">
							<text>发起时间</text>
							<text>2020-01-01 18:00</text>
						</view>
					</view>
					<view class="list">
						<text>金宝贝96节课程包</text>
						<text class="status yellow">待签署</text>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="list">
						<text>金宝贝96节课程包</text>
						<text class="status green">待支付</text>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="list">
						<text>金宝贝96节课程包</text>
						<text class="status gray">已发起</text>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="list">
						<text>金宝贝96节课程包</text>
						<text class="status pay">已付款</text>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="list">
						<text>金宝贝96节课程包</text>
						<text class="status invalid">已作废</text>
						<view class="iconfont icongengduo"></view>
					</view> -->
					
					
					<!-- <view class="list" style="justify-content: space-between;">
						<view style="display: flex;">
							<text style="font-size: 26rpx;color: #808080;">该合同由</text>
							<text style="font-size: 26rpx;color: #eaca0d;">课程顾问Kevin</text>
							<text style="font-size: 26rpx;color: #808080;">发起</text>
						</view>
						<view style="font-size: 26rpx;color: #b5b5b5;">2020-01-01 18:00</view>
					</view> -->
					
					
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="addSign">新建签约</button>
		</view>
		<!-- 姓名更改pop -->
		<Popup ref="popup" type="center" :maskClick="false">
			<view class="form" style="background-color: #fff;">
				<view>
					<text>姓名:</text>
					<input class="uni-input" name="input" placeholder="请输入中文名" v-model="form.realname"/>
				</view>
				<view>
					<text>英文:</text>
					<input class="uni-input" name="input" placeholder="请输入英文名" v-model="form.englishname"/>
				</view>
				<view class="name-btn">
					<button type="default" @click="close" style="border-radius: 0">取消</button>
					<button type="default" @click="sure" style="border-radius: 0;color: #007AFF;">确定</button>
				</view>
			</view>
			
		</Popup>
	</view>
</template>

<script>
	import Popup from "../../components/popup/uni-popup.vue"
	import { adviserList, editSimple } from '../../api/serviceApi.js'
	import { getUserState } from '../../api/indexApi.js'
	export default {
		data() {
			return {
				isShow: false,
				params: {
					p: 1,
					length: 10
				},
				contractList: [],
				total: '',
				userInfo: {},
				form: {
					realname: '',
					englishname: ''
				},
				
			}
		},
		onLoad() {
			this._adviserList() // 获取顾问的签约列表
			this._getUserState()
		},
		onPullDownRefresh() {
			console.log('开启下来刷新了')
			this.params.p = 1
			this.contractList = []
			this.userInfo = {}
			this.form.realname = ''
			this.form.englishname = ''
			setTimeout(() => {
				this._getUserState() // 获取实名状态
				this._adviserList(() => {
					uni.stopPullDownRefresh()
				}) // 获取顾问的签约列表
			}, 300)
		},
		onReachBottom() {
			if (this.contractList.length === this.total) return
			this.params.p ++
			this._adviserList() // 获取顾问的签约列表
		},
		methods: {
			async _getUserState() {
				const res = await getUserState()
				console.log(res)
				this.userInfo = res.data.data
			},
			async _adviserList(callback) {
				const res = await adviserList(this.params)
				console.log(res)
				// this.contractList = res.data.data.list
				this.contractList = [...this.contractList, ...res.data.data.list]
				this.total = res.data.data.total
				callback && callback()
			},
			realName() {
				// window.location.href = this.userInfo.url
				uni.navigateTo({
					url: '../real-name/real-name'
				})
			},
			open(){
				 this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
				this.form.realname = '',
				this.form.englishname = ''
			},
			async sure() {
				// console.log(this.form)
				const res = await editSimple(this.form)
				console.log(res)
				this.close()
				this.form.realname = '',
				this.form.englishname = ''
				this._getUserState() // 获取认证状态
			},
			addSign() {
				if (this.userInfo.status === 0) {
					uni.showToast({title: '未认证', icon: 'none'})
					setTimeout(() => {
						// window.location.href = this.userInfo.url
						uni.navigateTo({
							url: '../real-name/real-name'
						})
					}, 2000)
				} else if (!this.userInfo.company_name) {
					uni.showToast({title: '企业未认证', icon: 'none'})
				} else if (!this.userInfo.realname && !this.userInfo.englishname) {
					uni.showToast({title: '请先补全中英文名', icon: 'none'})
				}  else {
					uni.navigateTo({
						url: '../information/information'
					})
				}
			},
			navTo(id) {
				console.log(id)
				uni.navigateTo({
					url: `./mySignAdviser?id=${id}`
				})
			}
		},
		components: {
			Popup
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		border-radius: 8rpx 8rpx 0 0;
		border-radius: 8rpx;
		padding: 20rpx 0 0;
		view {
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			margin-bottom: 10rpx;
			text {
				// padding: 0 20rpx;
				padding-left: 44rpx;
			}
			input {
				text-align: right;
				margin-right: 30rpx;
			}
		}
		view:first-child{
			border-bottom: 1px solid #f8f8f8;
			padding: 10rpx 0 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		view:nth-child(2) {
			padding: 10rpx 0 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.name-btn {
			display: flex;
			button {
				width: 50%;
			}
		}
	}
	.top-bg {
		height: 300rpx;
		// background-color: #fedb0d;
		background-image: url(../../static/images/bg_purple.jpg);
		background-size: 100%;
		text-align: center;
		text {
			font-size: 152rpx;
			font-weight: 800;
			color: rgba(255, 255, 255, .2);
		}
	}
	.info-con {
		font-family: PingFangSC-Regular;
		// height: 250rpx;
		position: relative;
		.info {
			position: absolute;
			left: 50%;
			top: -200rpx;
			transform: translateX(-50%);
			.title {
				display: flex;
				align-items: center;
				// font-weight: 600;
				font-family: PingFangSC-Medium;
				color: #fff;
				padding-left: 4px;
				.user-name {
					padding-bottom: 4rpx;
					font-size: 34rpx;
					display: inline-block;
					// width: 216rpx;
					max-width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.user-state {
					padding: 0 10rpx;
					margin: 0 16rpx;
					// width: 100rpx;
					height: 40rpx;
					background-color: #fedb0d;
					border-radius: 20rpx;
					opacity: 0.8;
					font-size: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #1b0c4b;
					border: 1rpx solid #fedb0d;
					text:last-child {
						padding-bottom: 3rpx;
						padding-left: 4rpx;
					}
					.iconfont {
						font-size: 20rpx;
					}
				}
				.user-company {
					// width: 255rpx;
					padding: 0 16rpx;
					height: 40rpx;
					border-radius: 24rpx;
					border: 1rpx solid #fedb0d;
					color: #fedb0d;
					font-size: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text:last-child {
						padding-bottom: 3rpx;
						padding-left: 4rpx;
					}
					.iconfont {
						font-size: 18rpx;
					}
				}
			}
			.name {
				box-sizing: border-box;
				width: 690rpx;
				min-height: 130rpx;
				// height: 400rpx;
				background-color: #fff;
				box-shadow: 0 8rpx 68rpx 0 rgba(0, 0, 0, 0.1);
				border-radius: 2rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-top: 36rpx;
				padding: 0 20rpx;
				// margin-bottom: 160rpx;
				margin-bottom: 120rpx;
				.list {
					display: flex;
					flex-direction: column;
					// height: 118rpx;
					height: 130rpx;
					// align-items: center;
					border-bottom: 1rpx solid #e6e6e6;
					font-family: PingFangSC-Regular;
					.left {
						display: flex;
						height: 130rpx;
						align-items: center;
						text:nth-child(1) {
							font-size: 30rpx;
							color: #191919;
							padding-left: 10rpx;
							display: flex;
							flex: 4;
						}
						.status {
							display: flex;
							// flex: 1;
							justify-content: center;
							align-items: center;
							padding: 2rpx 10rpx 4rpx 10rpx;
							border-radius: 4rpx;
							font-size: 24rpx;
							color: #808080;
							margin: 0 10rpx 0 16rpx;
						}
						.red {
							background-color: #ffede9;
							color: #f86442;
						}
						.yellow {
							background-color: #fff8cf;
							color: #ff9001;
						}
						.green {
							background-color: #ebfae0;
							color: #4eb307;
						}
						.gray {
							background-color: #f1f1f1;
							color: #9b9b9b;
						}
						.pay {
							background-color: #ffede9;
							color: #f86442;
						}
						.invalid {
							background-color: #f1f1f1;
							color: #9b9b9b;
						}
						.icongengduo {
							color: #808080;
							font-size: 26rpx;
						}
					}
					.right {
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						color: #ccc;
						padding-left: 10rpx;
						display: flex;
						justify-content: space-between;
						padding-bottom: 20rpx;
					}
				}
				.list:last-child {
					border-bottom: none;
				}
			}
		}
	}
	.btn {
		position: fixed;
		// bottom: 34rpx;
		bottom: 30rpx;
		width: 100%;
		button {
			width: 92%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #403172 !important;
			border-radius: 2rpx;
			font-family: SourceHanSansCN-Medium;
			font-size: 32rpx;
			color: #fedb0d;
			font-weight: 600;
		}
	}
	.btn:active {
		opacity: .9;
	}
</style>
